<template>
  <el-aside>
    <div class="logo">
      <img
        src="http://vue3.mengxuegu.com/assets/logo-8ba32897.png"
        alt="logo"
        style="width: 25px"
      />
      <span>积云-Vue3全家桶项目</span>
    </div>
    <el-menu
      active-text-color="#333"
      background-color="transparent"
      class="el-menu-vertical-demo"
      default-active="/system/menu"
      text-color="#000"
      router
    >
      <el-menu-item index="/home">
        <Svgicon icon="HomeFilled"></Svgicon>
        <span>首页</span>
      </el-menu-item>
      <el-sub-menu index="/system">
        <template #title>
          <Svgicon icon="Tools"></Svgicon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/system/menu"
          ><Svgicon icon="Menu"></Svgicon>菜单管理</el-menu-item
        >
        <el-menu-item index="/system/role"
          ><Svgicon icon="IceCream"></Svgicon>角色管理</el-menu-item
        >
        <el-menu-item index="/system/user"
          ><Svgicon icon="UserFilled"></Svgicon>用户管理</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="/goods">
        <template #title>
          <Svgicon icon="Goods"></Svgicon>
          <span>商品管理</span>
        </template>
        <el-menu-item index="/goods/list"
          ><Svgicon icon="GoodsFilled"></Svgicon>商品列表</el-menu-item
        >
        <el-menu-item index="/goods/category"
          ><Svgicon icon="Operation"></Svgicon>商品分类</el-menu-item
        >
      </el-sub-menu>
      <el-menu-item index="/jiyun">
        <Svgicon icon="Link"></Svgicon>
        <span>积云官网</span>
      </el-menu-item>
      <el-menu-item index="/401">
        <Svgicon icon="WarningFilled"></Svgicon>
        <span>401</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script lang="ts" setup>
import Svgicon from "../Svgicon.vue";
</script>

<style lang="scss" scoped>
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  span {
    color: #40aaff;
    font-size: 14px;
    margin-left: 6px;
  }
}
.el-menu-item:hover {
  background-color: #2b2f38 !important;
  color: #fff;
}
.el-menu-item:focus {
  background-color: #2b2f38 !important;
  color: #fff;
}
// .el-sub-menu.is-opened:hover {
//     background-color: transparent !important;
// }
</style>
